<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{
			perspective: 5px;
		}
			.box{
				width: 300px;
				height: 300px;
				margin: 150px auto;
				transition: all 1s; 
				transform-style: preserve-3d;
				perspective: 5px;
				transform-origin: left bottom;
			}
			.box:hover{
				transform: rotateX(-180deg);
				
			}
			.per{
				transform-style: preserve-3d;
			}
			
			.box2{
				width: 100px;
				height: 200px;
				position: relative;
				margin: 0 auto;
				background: #ccc;
				transform-style: preserve-3d;
			}
			.box2:before{
				content: "";
				width: 100px;
				height: 200px;
				left: 0;
				top: 0;
				display: block;
				background: blue;
				transform: rotateX(45deg) skew(0deg);
				animation: move 5s infinite;
			}
			@keyframes move{
				0%{}
				50%{
					transform: skew(360deg);
				}
				to{
					transform: skew(0deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="images/images/musicb.jpg"/>
		</div>
		
		<div class="per">
			<div class="box2">
			</div>
		</div>
		
	</body>
</html>
